<template>
  <el-container>
    <el-main>
      <el-button type="primary"  size="mini" @click="dialogVisible = true" style=" text-align: center; " >对比</el-button>
      <el-dialog :visible.sync="dialogVisible" width="60%"   style=" text-align: center; " >
              <el-image
                :src= "url_org"
                class="image_1"
                style="border-radius: 3px 3px 0 0;padding-right:5%;width: 45%; height: 45%"
                :preview-src-list = "[url_org]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
              <el-image
                :src="url_enh"
                class="image_1"
                style="border-radius: 3px 3px 0 0;width: 45%; height: 45%"
                :preview-src-list = "[url_enh]"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" size="mini" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false
    }
  },
  props: {
    url_org: {
      type: String
    },
    url_enh: {
      type: String
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  },
  components: {
    // repassword
  }
}
</script>
<style lang="scss" scoped>
.result1{
  display: flex;
  flex-direction:row;
  align-items:center;
}
.image_1 {
  aspect-ratio: 1 / 1;
  background-color: unset;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.o-image__preview {
  width: 40%;
  aspect-ratio: 1 / 1;
  float: left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.o-image__preview2 {
  width: 40%;
  aspect-ratio: 1 / 1;
  float: right;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
}
.result1{
  display: flex;
  flex:3;
  flex-direction:row;
  align-items:center;
}
</style>
